<template>
    <div style="height: 100%;width: 100%" class="app-container">
        <!--地图容器-->
        <div id="mapContainer" style="width: 100%;height: 100%"> </div>
        <!--图层控制及点选查询工具栏-->
        <div class="toolbar" :style="{top:toolbarTop,right:toolbarRight,width:toolbarWidth}">
            <el-row type="flex">
                <el-col>
                    <a title="获取坐标点" @click="pointSelectClick" :style="{color: selectPointSelectColor}"><i class="el-icon-location-outline"></i><span class="toolbar-title">获取坐标点</span></a>
                    <a title="坐标转换" @click="showTransform"><i class="el-icon-location-outline"></i><span class="toolbar-title">加偏坐标转换</span></a>
                    <a title="坐标投影" @click="showProject"><i class="el-icon-location-outline"></i><span class="toolbar-title">正常坐标转换</span></a>
                </el-col>
            </el-row>
        </div>
        <!--用户查询需知弹出窗-->
        <el-dialog :visible.sync="infoWindowShow"
                   title="获取坐标点"
                   width="500px"
                   center
                   :destroy-on-close="true"
                   >
            <div>
                <p><label>百度坐标：</label>{{bdPoint?bdPoint.lng:''}}, {{bdPoint?bdPoint.lat:''}}</p>
                <p><label>火星坐标：</label>{{marsPoint?marsPoint.lng:''}}, {{marsPoint?marsPoint.lat:''}}</p>
                <p><label>WGS84坐标：</label>{{wgs84Point?wgs84Point.lng:''}}, {{wgs84Point?wgs84Point.lat:''}}</p>
                <p> <label>CGCS2000坐标：</label>{{cgcsPoint?cgcsPoint.lng:''}}, {{cgcsPoint?cgcsPoint.lat:''}}</p>
                <p><label>投影坐标：</label>{{prjPoint?prjPoint.lng:''}}, {{prjPoint?prjPoint.lat:''}}</p>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-row type="flex" justify="center">
                    <el-button type="primary" @click="handleClose">关 闭</el-button>
                </el-row>
            </div>
        </el-dialog>
        <!--互联网加偏坐标转换-->
        <el-dialog :visible.sync="transformWindowShow"
                   title="互联网加偏坐标转换"
                   width="90%"
                   center
                   :destroy-on-close="true"
        >
            <div style="margin: 10px; " >
                <div style="border:1px solid darkgrey ;padding: 10px 10px">
                    <div>
                        <el-row type="flex">
                            <el-col>
                                <el-form label-position="right" label-width="150px" :model="transformInput">
                                    <el-form-item label="输入坐标系：">
                                        <el-select v-model="transformInput.crs" @change="selectChanged" placeholder="请选择输入坐标系">
                                            <el-option
                                                v-for="item in crsList"
                                                :key="item.value"
                                                :label="item.name"
                                                :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="经度(Longitude)：">
                                        <el-input v-model="transformInput.lng"></el-input>
                                    </el-form-item>
                                    <el-form-item label="纬度(Latitude)：">
                                        <el-input v-model="transformInput.lat"></el-input>
                                    </el-form-item>
                                </el-form>
                            </el-col>
                            <el-col>
                                <el-form label-position="right" label-width="150px" :model="transformOutput">
                                    <el-form-item label="输出坐标系：">
                                        <el-select v-model="transformOutput.crs" @change="selectChanged" placeholder="请选择输出坐标系">
                                            <el-option
                                                v-for="item in crsList"
                                                :key="item.value"
                                                :label="item.name"
                                                :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="经度(Longitude)：">
                                        <el-input v-model="transformOutput.lng"></el-input>
                                    </el-form-item>
                                    <el-form-item label="纬度(Latitude)：">
                                        <el-input v-model="transformOutput.lat"></el-input>
                                    </el-form-item>
                                </el-form>
                            </el-col>
                        </el-row>
                    </div>
                    <div>
                        <p style="margin-left: 30px">经纬度输入格式：【100°33′10″】【100.55】【100 33 10】</p>
                    </div>
                    <div style="margin-top: 5px">

                        <el-row type="flex" justify="center" align="middle">
                            <el-col type="flex" justify="center" align="middle">
                                <el-button round type="primary" style="width: 120px;" @click="transform">转换</el-button>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </div>
        </el-dialog>
        <!--正常坐标转换-->
        <el-dialog :visible.sync="prjWindowShow"
                   title="正常坐标转换"
                   width="90%"
                   center
                   :destroy-on-close="true"
        >
            <div style="margin: 10px; " >
                <div style="border:1px solid darkgrey ;padding: 10px 10px">
                    <div  v-show="swaptogo">
                        <el-row type="flex">
                            <el-col>
                                <el-form label-position="right" label-width="150px" :model="projectionInput">
                                    <el-form-item label="输入坐标系：">
                                        <el-select v-model="projectionInput.crsType" @change="selectInputCrsTypeChanged" placeholder="请选择坐标系类型">
                                            <el-option
                                                v-for="item in crsTypeList"
                                                :key="item.name"
                                                :label="item.name"
                                                :value="item.name">
                                            </el-option>
                                        </el-select>
                                        <el-select v-model="projectionInput.crs" placeholder="请选择输入坐标系" style="margin-left: 10px">
                                            <el-option
                                                v-for="item in prjListInput"
                                                :key="item.epsg"
                                                :label="item.name"
                                                :value="item.epsg">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item :label="projectionInput.lngLabelInput">
                                        <el-input v-model="projectionInput.lng" ></el-input>
                                    </el-form-item>
                                    <el-form-item :label="projectionInput.latLabelInput">
                                        <el-input v-model="projectionInput.lat"></el-input>
                                    </el-form-item>
                                </el-form>
                            </el-col>
                            <el-col>
                                <el-form label-position="right" label-width="150px" :model="projectionOutput">
                                    <el-form-item label="输出坐标系：">
                                        <el-select v-model="projectionOutput.crsType" @change="selectOutputCrsTypeChanged" placeholder="请选择坐标系类型">
                                            <el-option
                                                v-for="item in crsTypeList"
                                                :key="item.name"
                                                :label="item.name"
                                                :value="item.name">
                                            </el-option>
                                        </el-select>
                                        <el-select v-model="projectionOutput.crs" placeholder="请选择坐标系" style="margin-left: 10px">
                                            <el-option
                                                v-for="item in prjListOutput"
                                                :key="item.epsg"
                                                :label="item.name"
                                                :value="item.epsg">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item :label="projectionOutput.lngLabelInput">
                                        <el-input v-model="projectionOutput.x"></el-input>
                                    </el-form-item>
                                    <el-form-item :label="projectionOutput.latLabelInput">
                                        <el-input v-model="projectionOutput.y"></el-input>
                                    </el-form-item>
                                </el-form>
                            </el-col>
                        </el-row>
                    </div>
                    <div v-show="!swaptogo">
                        <el-row type="flex">
                            <el-col>
                                <el-form label-position="right" label-width="150px" :model="projectionOutput">
                                    <el-form-item label="输入坐标系：">
                                        <el-select v-model="projectionOutput.crsType" @change="selectOutputCrsTypeChanged" placeholder="请选择坐标系类型">
                                            <el-option
                                                v-for="item in crsTypeList"
                                                :key="item.name"
                                                :label="item.name"
                                                :value="item.name">
                                            </el-option>
                                        </el-select>
                                        <el-select v-model="projectionOutput.crs" placeholder="请选择坐标系" style="margin-left: 10px">
                                            <el-option
                                                v-for="item in prjListOutput"
                                                :key="item.epsg"
                                                :label="item.name"
                                                :value="item.epsg">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item :label="projectionOutput.lngLabelInput">
                                        <el-input v-model="projectionOutput.x"></el-input>
                                    </el-form-item>
                                    <el-form-item :label="projectionOutput.latLabelInput">
                                        <el-input v-model="projectionOutput.y"></el-input>
                                    </el-form-item>
                                </el-form>
                            </el-col>
                            <el-col>
                                <el-form label-position="right" label-width="150px" :model="projectionInput">
                                    <el-form-item label="输出坐标系：">
                                        <el-select v-model="projectionInput.crsType" @change="selectInputCrsTypeChanged" placeholder="请选择坐标系类型">
                                            <el-option
                                                v-for="item in crsTypeList"
                                                :key="item.name"
                                                :label="item.name"
                                                :value="item.name">
                                            </el-option>
                                        </el-select>
                                        <el-select v-model="projectionInput.crs" placeholder="请选择输入坐标系" style="margin-left: 10px">
                                            <el-option
                                                v-for="item in prjListInput"
                                                :key="item.epsg"
                                                :label="item.name"
                                                :value="item.epsg">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item :label="projectionInput.lngLabelInput">
                                        <el-input v-model="projectionInput.lng" ></el-input>
                                    </el-form-item>
                                    <el-form-item :label="projectionInput.latLabelInput">
                                        <el-input v-model="projectionInput.lat" ></el-input>
                                    </el-form-item>
                                </el-form>
                            </el-col>
                        </el-row>
                    </div>
                    <div>
                        <p style="margin-left: 30px">经纬度输入格式：【100°33′10″】【100.55】【100 33 10】</p>
                    </div>
                    <div>
                        <el-row type="flex" justify="center" align="middle" style="margin-top: 10px">
                            <el-col type="flex" justify="center" align="middle">
                                <el-button round primary style="width: 120px;margin-left: 100px" @click="swaptogo=!swaptogo">交换(⇄)</el-button>
                            </el-col>
                        </el-row>
                    </div>
                    <div style="margin-top: 20px">
                        <el-row type="flex" justify="center" align="middle">
                            <el-col type="flex" justify="center" align="middle">
                                <el-button round type="primary" style="width: 120px;margin-left: 100px" @click="projdo">转换</el-button>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>

</template>

<script>
//import { BMPGL } from "@/js/bmpgl";
import proj4 from "proj4";
import crs_defs from "@/js/crs_defs";
import mapTools from "@/js/mapTools";
import {bsInfo} from "@/js/browser";
import { reactive, watch} from "vue";

const initConfig=window.landConfig;
const crsList=[
    {name:"百度坐标系(BD09)",value:"BD09",epsg:"1"},
    //{name:"百度墨卡托",value:"BDMT",epsg:"2"},
    {name:"火星坐标系(GCJ02)",value:"GCJ02",epsg:"2"},
    {name:"世界大地坐标系(WGS84)",value:"WGS84",epsg:"4326"},
    {name:"中国大地坐标系(CGCS2000)",value:"CGCS2000",epsg:"4490"}
]
const crsTypeList=[
    {name:"地理坐标系",type:"gcs"},
    {name:"Beijing54投影坐标系",type:"prj"},
    {name:"Xian80投影坐标系",type:"prj"},
    {name:"CGCS2000投影坐标系",type:"prj"},
    {name:"WGS84投影坐标系",type:"prj"}
]
//地理坐标系
const GCS_EPSG={
    GCS_Beijing_1954: 4214,
    GCS_Xian_1980: 4610,
    GCS_CGCS_2000: 4490,
    GCS_WGS_1984:4326
}
//Beijing54投影坐标系
const PRJ_Beijing54_EPSG={
    //Beijing_1954_3_Degree_GK_Zone_xx (25-45,2401) False_Easting=zone+500000
    Beijing_1954_3_Degree_GK_Zone_25: 2401,
    Beijing_1954_3_Degree_GK_Zone_26: 2402,
    Beijing_1954_3_Degree_GK_Zone_27: 2403,
    Beijing_1954_3_Degree_GK_Zone_28: 2404,
    Beijing_1954_3_Degree_GK_Zone_29: 2405,
    Beijing_1954_3_Degree_GK_Zone_30: 2406,
    Beijing_1954_3_Degree_GK_Zone_31: 2407,
    Beijing_1954_3_Degree_GK_Zone_32: 2408,
    Beijing_1954_3_Degree_GK_Zone_33: 2409,
    Beijing_1954_3_Degree_GK_Zone_34: 2410,
    Beijing_1954_3_Degree_GK_Zone_35: 2411,
    Beijing_1954_3_Degree_GK_Zone_36: 2412,
    Beijing_1954_3_Degree_GK_Zone_37: 2413,
    Beijing_1954_3_Degree_GK_Zone_38: 2414,
    Beijing_1954_3_Degree_GK_Zone_39: 2415,
    Beijing_1954_3_Degree_GK_Zone_40: 2416,
    Beijing_1954_3_Degree_GK_Zone_41: 2417,
    Beijing_1954_3_Degree_GK_Zone_42: 2418,
    Beijing_1954_3_Degree_GK_Zone_43: 2419,
    Beijing_1954_3_Degree_GK_Zone_44: 2420,
    Beijing_1954_3_Degree_GK_Zone_45: 2421,
    //Beijing_1954_3_Degree_GK_CM_xx (75E-135E,2422) False_Easting=500000
    Beijing_1954_3Degree_GK_CM_75E: 2422,
    Beijing_1954_3Degree_GK_CM_78E: 2423,
    Beijing_1954_3Degree_GK_CM_81E: 2424,
    Beijing_1954_3Degree_GK_CM_84E: 2425,
    Beijing_1954_3Degree_GK_CM_87E: 2426,
    Beijing_1954_3Degree_GK_CM_90E: 2427,
    Beijing_1954_3Degree_GK_CM_93E: 2428,
    Beijing_1954_3Degree_GK_CM_96E: 2429,
    Beijing_1954_3Degree_GK_CM_99E: 2430,
    Beijing_1954_3Degree_GK_CM_102E: 2431,
    Beijing_1954_3Degree_GK_CM_105E: 2432,
    Beijing_1954_3Degree_GK_CM_108E: 2433,
    Beijing_1954_3Degree_GK_CM_111E: 2434,
    Beijing_1954_3Degree_GK_CM_114E: 2435,
    Beijing_1954_3Degree_GK_CM_117E: 2436,
    Beijing_1954_3Degree_GK_CM_120E: 2437,
    Beijing_1954_3Degree_GK_CM_123E: 2438,
    Beijing_1954_3Degree_GK_CM_126E: 2439,
    Beijing_1954_3Degree_GK_CM_129E: 2440,
    Beijing_1954_3Degree_GK_CM_132E: 2441,
    Beijing_1954_3Degree_GK_CM_135E: 2442,
    //Beijing_1954_6_Degree_GK_Zone_xx (13-23,21413) False_Easting=zone+500000
    Beijing_1954_6_Degree_GK_Zone_13: 21413,
    Beijing_1954_6_Degree_GK_Zone_14: 21414,
    Beijing_1954_6_Degree_GK_Zone_15: 21415,
    Beijing_1954_6_Degree_GK_Zone_16: 21416,
    Beijing_1954_6_Degree_GK_Zone_17: 21417,
    Beijing_1954_6_Degree_GK_Zone_18: 21418,
    Beijing_1954_6_Degree_GK_Zone_19: 21419,
    Beijing_1954_6_Degree_GK_Zone_20: 21420,
    Beijing_1954_6_Degree_GK_Zone_21: 21421,
    Beijing_1954_6_Degree_GK_Zone_22: 21422,
    Beijing_1954_6_Degree_GK_Zone_23: 21423,
    //Beijing_1954_6_Degree_GK_CM_xx (75E-135E,21473) False_Easting=500000
    Beijing_1954_6_Degree_GK_CM_75E: 21473,
    Beijing_1954_6_Degree_GK_CM_81E: 21474,
    Beijing_1954_6_Degree_GK_CM_87E: 21475,
    Beijing_1954_6_Degree_GK_CM_93E: 21476,
    Beijing_1954_6_Degree_GK_CM_99E: 21477,
    Beijing_1954_6_Degree_GK_CM_105E: 21478,
    Beijing_1954_6_Degree_GK_CM_111E: 21479,
    Beijing_1954_6_Degree_GK_CM_117E: 21480,
    Beijing_1954_6_Degree_GK_CM_123E: 21481,
    Beijing_1954_6_Degree_GK_CM_129E: 21482,
    Beijing_1954_6_Degree_GK_CM_135E: 21483
}
//Xian80投影坐标系
const PRJ_Xian80_EPSG = {
    //Xian_1980_3_Degree_GK_Zone_xx (25-45,2349) False_Easting=zone+500000
    Xian_1980_3_Degree_GK_Zone_25: 2349,
    Xian_1980_3_Degree_GK_Zone_26: 2350,
    Xian_1980_3_Degree_GK_Zone_27: 2351,
    Xian_1980_3_Degree_GK_Zone_28: 2352,
    Xian_1980_3_Degree_GK_Zone_29: 2353,
    Xian_1980_3_Degree_GK_Zone_30: 2354,
    Xian_1980_3_Degree_GK_Zone_31: 2355,
    Xian_1980_3_Degree_GK_Zone_32: 2356,
    Xian_1980_3_Degree_GK_Zone_33: 2357,
    Xian_1980_3_Degree_GK_Zone_34: 2358,
    Xian_1980_3_Degree_GK_Zone_35: 2359,
    Xian_1980_3_Degree_GK_Zone_36: 2360,
    Xian_1980_3_Degree_GK_Zone_37: 2361,
    Xian_1980_3_Degree_GK_Zone_38: 2362,
    Xian_1980_3_Degree_GK_Zone_39: 2363,
    Xian_1980_3_Degree_GK_Zone_40: 2364,
    Xian_1980_3_Degree_GK_Zone_41: 2365,
    Xian_1980_3_Degree_GK_Zone_42: 2366,
    Xian_1980_3_Degree_GK_Zone_43: 2367,
    Xian_1980_3_Degree_GK_Zone_44: 2368,
    Xian_1980_3_Degree_GK_Zone_45: 2369,
    //Xian_1980_3_Degree_GK_CM_xx (75E-135E,2370) False_Easting=500000
    Xian_1980_3Degree_GK_CM_75E: 2370,
    Xian_1980_3Degree_GK_CM_78E: 2371,
    Xian_1980_3Degree_GK_CM_81E: 2372,
    Xian_1980_3Degree_GK_CM_84E: 2373,
    Xian_1980_3Degree_GK_CM_87E: 2374,
    Xian_1980_3Degree_GK_CM_90E: 2375,
    Xian_1980_3Degree_GK_CM_93E: 2376,
    Xian_1980_3Degree_GK_CM_96E: 2377,
    Xian_1980_3Degree_GK_CM_99E: 2378,
    Xian_1980_3Degree_GK_CM_102E: 2379,
    Xian_1980_3Degree_GK_CM_105E: 2380,
    Xian_1980_3Degree_GK_CM_108E: 2381,
    Xian_1980_3Degree_GK_CM_111E: 2382,
    Xian_1980_3Degree_GK_CM_114E: 2383,
    Xian_1980_3Degree_GK_CM_117E: 2384,
    Xian_1980_3Degree_GK_CM_120E: 2385,
    Xian_1980_3Degree_GK_CM_123E: 2386,
    Xian_1980_3Degree_GK_CM_126E: 2387,
    Xian_1980_3Degree_GK_CM_129E: 2388,
    Xian_1980_3Degree_GK_CM_132E: 2389,
    Xian_1980_3Degree_GK_CM_135E: 2390,
    // Xian_1980_6_Degree_GK_Zone_xx (13-23,2327) False_Easting=zone+500000
    Xian_1980_6_Degree_GK_Zone_13: 2327,
    Xian_1980_6_Degree_GK_Zone_14: 2328,
    Xian_1980_6_Degree_GK_Zone_15: 2329,
    Xian_1980_6_Degree_GK_Zone_16: 2330,
    Xian_1980_6_Degree_GK_Zone_17: 2331,
    Xian_1980_6_Degree_GK_Zone_18: 2332,
    Xian_1980_6_Degree_GK_Zone_19: 2333,
    Xian_1980_6_Degree_GK_Zone_20: 2334,
    Xian_1980_6_Degree_GK_Zone_21: 2335,
    Xian_1980_6_Degree_GK_Zone_22: 2336,
    Xian_1980_6_Degree_GK_Zone_23: 2337,
    // Xian_1980_6_Degree_GK_CM_xx (75E-135E,2338) False_Easting=500000
    Xian_1980_6_Degree_GK_CM_75E: 2338,
    Xian_1980_6_Degree_GK_CM_81E: 2339,
    Xian_1980_6_Degree_GK_CM_87E: 2340,
    Xian_1980_6_Degree_GK_CM_93E: 2341,
    Xian_1980_6_Degree_GK_CM_99E: 2342,
    Xian_1980_6_Degree_GK_CM_105E: 2343,
    Xian_1980_6_Degree_GK_CM_111E: 2344,
    Xian_1980_6_Degree_GK_CM_117E: 2345,
    Xian_1980_6_Degree_GK_CM_123E: 2346,
    Xian_1980_6_Degree_GK_CM_129E: 2347,
    Xian_1980_6_Degree_GK_CM_135E: 2348
};
//CGCS2000投影坐标系
const PRJ_CGCS2000_EPSG = {
    //CGCS_2000_3_Degree_GK_Zone_xx (25-45,4513) False_Easting=zone+500000
    CGCS_2000_3_Degree_GK_Zone_25: 4513,
    CGCS_2000_3_Degree_GK_Zone_26: 4514,
    CGCS_2000_3_Degree_GK_Zone_27: 4515,
    CGCS_2000_3_Degree_GK_Zone_28: 4516,
    CGCS_2000_3_Degree_GK_Zone_29: 4517,
    CGCS_2000_3_Degree_GK_Zone_30: 4518,
    CGCS_2000_3_Degree_GK_Zone_31: 4519,
    CGCS_2000_3_Degree_GK_Zone_32: 4520,
    CGCS_2000_3_Degree_GK_Zone_33: 4521,
    CGCS_2000_3_Degree_GK_Zone_34: 4522,
    CGCS_2000_3_Degree_GK_Zone_35: 4523,
    CGCS_2000_3_Degree_GK_Zone_36: 4524,
    CGCS_2000_3_Degree_GK_Zone_37: 4525,
    CGCS_2000_3_Degree_GK_Zone_38: 4526,
    CGCS_2000_3_Degree_GK_Zone_39: 4527,
    CGCS_2000_3_Degree_GK_Zone_40: 4528,
    CGCS_2000_3_Degree_GK_Zone_41: 4529,
    CGCS_2000_3_Degree_GK_Zone_42: 4530,
    CGCS_2000_3_Degree_GK_Zone_43: 4531,
    CGCS_2000_3_Degree_GK_Zone_44: 4532,
    CGCS_2000_3_Degree_GK_Zone_45: 4533,
    //CGCS_2000_3_Degree_GK_CM_xx (75E-135E,4534) False_Easting=500000
    CGCS_2000_3Degree_GK_CM_75E: 4534,
    CGCS_2000_3Degree_GK_CM_78E: 4535,
    CGCS_2000_3Degree_GK_CM_81E: 4536,
    CGCS_2000_3Degree_GK_CM_84E: 4537,
    CGCS_2000_3Degree_GK_CM_87E: 4538,
    CGCS_2000_3Degree_GK_CM_90E: 4539,
    CGCS_2000_3Degree_GK_CM_93E: 4540,
    CGCS_2000_3Degree_GK_CM_96E: 4541,
    CGCS_2000_3Degree_GK_CM_99E: 4542,
    CGCS_2000_3Degree_GK_CM_102E: 4543,
    CGCS_2000_3Degree_GK_CM_105E: 4544,
    CGCS_2000_3Degree_GK_CM_108E: 4545,
    CGCS_2000_3Degree_GK_CM_111E: 4546,
    CGCS_2000_3Degree_GK_CM_114E: 4547,
    CGCS_2000_3Degree_GK_CM_117E: 4548,
    CGCS_2000_3Degree_GK_CM_120E: 4549,
    CGCS_2000_3Degree_GK_CM_123E: 4550,
    CGCS_2000_3Degree_GK_CM_126E: 4551,
    CGCS_2000_3Degree_GK_CM_129E: 4552,
    CGCS_2000_3Degree_GK_CM_132E: 4553,
    CGCS_2000_3Degree_GK_CM_135E: 4554,
    //CGCS_2000_6_Degree_GK_Zone_xx (13-23,4491) False_Easting=zone+500000
    CGCS_2000_6_Degree_GK_Zone_13: 4491,
    CGCS_2000_6_Degree_GK_Zone_14: 4492,
    CGCS_2000_6_Degree_GK_Zone_15: 4493,
    CGCS_2000_6_Degree_GK_Zone_16: 4494,
    CGCS_2000_6_Degree_GK_Zone_17: 4495,
    CGCS_2000_6_Degree_GK_Zone_18: 4496,
    CGCS_2000_6_Degree_GK_Zone_19: 4497,
    CGCS_2000_6_Degree_GK_Zone_20: 4498,
    CGCS_2000_6_Degree_GK_Zone_21: 4499,
    CGCS_2000_6_Degree_GK_Zone_22: 4500,
    CGCS_2000_6_Degree_GK_Zone_23: 4501,
    //CGCS_2000_6_Degree_GK_CM_xx (75E-135E,4502) False_Easting=500000
    CGCS_2000_6_Degree_GK_CM_75E: 4502,
    CGCS_2000_6_Degree_GK_CM_81E: 4503,
    CGCS_2000_6_Degree_GK_CM_87E: 4504,
    CGCS_2000_6_Degree_GK_CM_93E: 4505,
    CGCS_2000_6_Degree_GK_CM_99E: 4506,
    CGCS_2000_6_Degree_GK_CM_105E: 4507,
    CGCS_2000_6_Degree_GK_CM_111E: 4508,
    CGCS_2000_6_Degree_GK_CM_117E: 4509,
    CGCS_2000_6_Degree_GK_CM_123E: 4510,
    CGCS_2000_6_Degree_GK_CM_129E: 4511,
    CGCS_2000_6_Degree_GK_CM_135E: 4512
};
//WGS84投影坐标系
const PRJ_WGS84_EPSG = {
    WGS_1984_Web_Mercator: 3857,
    WGS_1984_World_Mercator:3395
};
//屏幕尺寸自适应设置
const selfAdaption = reactive({
    toolbarTop:bsInfo.size.sm?"93%":"2.1rem",
    toolbarRight:bsInfo.size.sm?"2%":"2%",
    toolbarWidth:bsInfo.size.sm?"85%":"22rem",
    toolbarIconLeft:bsInfo.size.sm?"-2rem":"-10%",
    toolbarIconHeight:bsInfo.size.sm?"2.8rem":"195%",
    toolbarIconTop:bsInfo.size.sm?"-0.65rem":"-3%",
    toolbarIconImg:bsInfo.size.sm?"2.8rem":"130%",

});

const styleOptions = {
    strokeColor:"black",    //边线颜色。
    fillColor:"red",      //填充颜色。当参数为空时，圆形将没有填充效果。
    strokeWeight: 3,       //边线的宽度，以像素为单位。
    strokeOpacity: 0.8,       //边线透明度，取值范围0 - 1。
    fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
    strokeStyle: 'solid' //边线的样式，solid或dashed。
}
export default {
    name: "MapGL",
    data() {
        return {
            AK: initConfig.baiduAK,
            BMapGL:null,
            map:null,
            crsList:crsList,
            crsTypeList:crsTypeList,
            transformInput:{
                crs:null,
                lat:null,
                lng:null,
            },
            transformOutput:{
                crs:null,
                lat:null,
                lng:null,
            },
            projectionInput:{
                lngLabelInput:"经度(Longitude)：",
                latLabelInput:"纬度(Latitude)：",
                crsType:"",
                crs:null,
                lat:null,
                lng:null,
                x:null,
                y:null
            },
            prjListInput:[],
            projectionOutput:{
                lngLabelInput:"X：",
                latLabelInput:"Y：",
                crsType:"",
                crs:null,
                lat:null,
                lng:null,
                x:null,
                y:null
            },
            prjListOutput:[],
            toolbarTop:selfAdaption.toolbarTop,
            toolbarRight:selfAdaption.toolbarRight,
            toolbarWidth:selfAdaption.toolbarWidth,
            toolbarIconLeft:selfAdaption.toolbarIconLeft,
            toolbarIconHeight:selfAdaption.toolbarIconHeight,
            toolbarIconTop:selfAdaption.toolbarIconTop,toolbarIconImg:selfAdaption.toolbarIconImg,

            swaptogo:true,

            loading:null,
            initCenter:initConfig.initCenterCity,
            initZoom:initConfig.initZoomLevel,
            zoomToLevel:initConfig.zoomToLevel,
            buildingShow:initConfig.buildingShow,
            epsgCode:initConfig.epsgCode,

            selectFullScreenColor:'#fff',
            selectPointSelectColor:'#fff',
            fullScreenClickTogo:false,
            pointSelectBarTogo:false,
            infoWindowShow:false,
            screenWidth: document.body.clientWidth,
            bdPoint:null,
            marsPoint:null,
            wgs84Point:null,
            cgcsPoint:null,
            prjPoint:null,
            transformWindowShow:false,
            prjWindowShow:false,
        };
    },
    mounted() {
        crs_defs();
        this.initMap();
        window.onresize = () => (() => {
            this.screenWidth = document.body.clientWidth;
        })();
    },
    methods: {
        initMap() {
            let that=this;
            // 创建地图实例
            let map = new BMapGL.Map("mapContainer");
            this.map=map;
            // 初始化地图，设置中心点坐标和地图级别
            this.map.centerAndZoom(this.initCenter, this.initZoom);
            //开启鼠标滚轮缩放
            this.map.enableScrollWheelZoom(true);
            //this.map.setMinZoom(9);
            //this.map.setMaxZoom(13);
            //this.map.setTilt(85);
            //this.map.setMapStyleV2({ styleJson: custom_map });
            this.map.setDisplayOptions({
                skyColors: ["rgba(0, 0, 0, 0)"]
            });
            this.map.setDisplayOptions({
                //poiText: false,  // 隐藏poi标注
                //poiIcon: false,  // 隐藏poi图标
                building: this.buildingShow  // 隐藏楼块
            });

            /*this.map.addEventListener("zoomend", function(e){
                let zoom= that.map.getZoom(); // 获取缩放级别
                console.log(zoom)
                console.log(e)
                // 其余操作
            });*/

        },
        swap(){
            this.swaptogo=!this.swaptogo;
        },
        showTransform(){
            this.transformWindowShow=true;
        },
        showProject(){
            this.prjWindowShow=true;
        },
        selectChanged(){
            if(this.transformInput.crs==null){
                return;
            }
            if(this.transformOutput.crs==null){
                return;
            }
            if(this.transformInput.lng==null){
                return;
            }
            if(this.transformInput.lat==null){
                return;
            }
            this.transform();
        },
        transform(){
            if(this.transformInput.crs==null){
                this.$message.warning("请选择输入坐标系！")
                return;
            }
            if(this.transformOutput.crs==null){
                this.$message.warning("请选择输出坐标系！")
                return;
            }
            if(this.transformInput.lng==null){
                this.$message.warning("请输入经度！")
                return;
            }
            if(this.transformInput.lat==null){
                this.$message.warning("请输入纬度！")
                return;
            }
            let result={lng:null,lat:null};
            try {
                let lng=Number(this.transformInput.lng);
                let lat=Number(this.transformInput.lat);
                switch (this.transformInput.crs) {
                    case "BD09":
                        result=this.BD09to(this.transformOutput.crs,{lng,lat});
                        break;
                    case "GCJ02":
                        result=this.GCJ02to(this.transformOutput.crs,{lng,lat});
                        break;
                    case "WGS84":
                        result=this.WGS84to(this.transformOutput.crs,{lng,lat});
                        break;
                    case "CGCS2000":
                        result=this.CGCS2000to(this.transformOutput.crs,{lng,lat});
                        break;
                }
                this.transformOutput.lng=result.lng;
                this.transformOutput.lat=result.lat;
            }catch (e) {
                this.$message.error(e)
            }

        },
        /**
         * 百度坐标转其他
         * @param dstCrs
         * @param point
         * @returns {null|{lng, lat}|{lng: number, lat: number}|{lng: *, lat: *}|*}
         * @constructor
         */
        BD09to(dstCrs,point){
            let marsPoint=null,wgs84Point=null,cgcsPoint=null;
            switch (dstCrs) {
                case "BD09":
                    return point;
                case "GCJ02":
                    console.log("百度坐标：",point);
                    marsPoint= mapTools.baiduTomars(point);
                    console.log("火星坐标：",marsPoint);
                    return marsPoint;
                case "WGS84":
                    console.log("百度坐标：",point);
                    marsPoint= mapTools.baiduTomars(point);
                    console.log("火星坐标：",marsPoint);
                    wgs84Point=mapTools.transformGCJ2WGS(marsPoint);
                    console.log("WGS84坐标：",wgs84Point);
                    return wgs84Point;
                case "CGCS2000":
                    console.log("百度坐标：",point);
                    marsPoint= mapTools.baiduTomars(point);
                    console.log("火星坐标：",marsPoint);
                    wgs84Point=mapTools.transformGCJ2WGS(marsPoint);
                    console.log("WGS84坐标：",wgs84Point);
                    cgcsPoint=this.WGS84ToCGCS2000(wgs84Point.lng,wgs84Point.lat);
                    console.log("2000坐标：",cgcsPoint);
                    return cgcsPoint;
                default:
                    return null;
            }
        },
        /**
         * 火星转其他
         * @param dstCrs
         * @param point
         * @returns {null|{lng, lat}|{lng: number, lat: number}|{lng: *, lat: *}|*}
         * @constructor
         */
        GCJ02to(dstCrs,point){
            let bdPoint=null,wgs84Point=null,cgcsPoint=null;
            switch (dstCrs) {
                case "BD09":
                    console.log("火星坐标：",point);
                    bdPoint= mapTools.marsTobaidu(point);
                    console.log("百度坐标：",bdPoint);
                    return bdPoint;
                case "GCJ02":
                    return point;
                case "WGS84":
                    console.log("火星坐标：",point);
                    wgs84Point=mapTools.transformGCJ2WGS(point);
                    console.log("WGS84坐标：",wgs84Point);
                    return wgs84Point;
                case "CGCS2000":
                    console.log("火星坐标：",point);
                    wgs84Point=mapTools.transformGCJ2WGS(point);
                    console.log("WGS84坐标：",wgs84Point);
                    cgcsPoint=this.WGS84ToCGCS2000(wgs84Point.lng,wgs84Point.lat);
                    console.log("2000坐标：",cgcsPoint);
                    return cgcsPoint;
                default:
                    return null;
            }
        },
        /**
         *  WGS84转其他
         * @param dstCrs
         * @param point
         * @returns {null|{lng: *, lat: *}|{}|{lng: number, lat: number}|*}
         * @constructor
         */
        WGS84to(dstCrs,point){
            let bdPoint=null,marsPoint=null,cgcsPoint=null;
            switch (dstCrs) {
                case "BD09":
                    console.log("WGS84坐标：",point);
                    marsPoint=mapTools.transformWGS2GCJ(point);
                    console.log("火星坐标：",marsPoint);
                    bdPoint= mapTools.marsTobaidu(marsPoint);
                    console.log("百度坐标：",bdPoint);
                    return bdPoint;
                case "GCJ02":
                    console.log("WGS84坐标：",point);
                    marsPoint=mapTools.transformWGS2GCJ(point);
                    console.log("火星坐标：",marsPoint);
                    return marsPoint;
                case "WGS84":
                    return point;
                case "CGCS2000":
                    console.log("WGS84坐标：",point);
                    cgcsPoint=this.WGS84ToCGCS2000(point.lng,point.lat);
                    console.log("2000坐标：",cgcsPoint);
                    return cgcsPoint;
                default:
                    return null;
            }
        },
        /**
         * CGCS2000转其他
         * @param dstCrs
         * @param point
         * @returns {null|{lng: *, lat: *}|{}|{lng: number, lat: number}|*}
         * @constructor
         */
        CGCS2000to(dstCrs,point){
            let bdPoint=null,marsPoint=null,wgsPoint=null;
            switch (dstCrs) {
                case "BD09":
                    wgsPoint=this.CGCS2000ToWGS84(point.lng,point.lat);
                    console.log("WGS84坐标：",wgsPoint);
                    marsPoint=mapTools.transformWGS2GCJ(wgsPoint);
                    console.log("火星坐标：",marsPoint);
                    bdPoint= mapTools.marsTobaidu(marsPoint);
                    console.log("百度坐标：",bdPoint);
                    return bdPoint;
                case "GCJ02":
                    wgsPoint=this.CGCS2000ToWGS84(point.lng,point.lat);
                    console.log("WGS84坐标：",wgsPoint);
                    marsPoint=mapTools.transformWGS2GCJ(wgsPoint);
                    console.log("火星坐标：",marsPoint);
                    return marsPoint;
                case "WGS84":
                    wgsPoint=this.CGCS2000ToWGS84(point.lng,point.lat);
                    console.log("WGS84坐标：",wgsPoint);
                    return wgsPoint;
                case "CGCS2000":
                    return point;
                default:
                    return null;
            }
        },

        selectInputCrsTypeChanged(name){
            switch (name) {
                case "地理坐标系":
                    this.getPrjList(GCS_EPSG);
                    break;
                case "Beijing54投影坐标系":
                    this.getPrjList(PRJ_Beijing54_EPSG);
                    break;
                case "Xian80投影坐标系":
                    this.getPrjList(PRJ_Xian80_EPSG);
                    break;
                case "CGCS2000投影坐标系":
                    this.getPrjList(PRJ_CGCS2000_EPSG);
                    break;
                case "WGS84投影坐标系":
                    this.getPrjList(PRJ_WGS84_EPSG);
                    break;
            }
            let type=this.getCrsType(name);
            if(type==="gcs"){
                this.projectionInput.lngLabelInput="经度(Longitude)：";
                this.projectionInput.latLabelInput="纬度(Latitude)：";
            }else{
                this.projectionInput.lngLabelInput="X：";
                this.projectionInput.latLabelInput="Y：";
            }
        },
        selectOutputCrsTypeChanged(name){
            switch (name) {
                case "地理坐标系":
                    this.getPrjList2(GCS_EPSG);
                    break;
                case "Beijing54投影坐标系":
                    this.getPrjList2(PRJ_Beijing54_EPSG);
                    break;
                case "Xian80投影坐标系":
                    this.getPrjList2(PRJ_Xian80_EPSG);
                    break;
                case "CGCS2000投影坐标系":
                    this.getPrjList2(PRJ_CGCS2000_EPSG);
                    break;
                case "WGS84投影坐标系":
                    this.getPrjList2(PRJ_WGS84_EPSG);
                    break;
            }
            let type=this.getCrsType(name);
            if(type==="gcs"){
                this.projectionOutput.lngLabelInput="经度(Longitude)：";
                this.projectionOutput.latLabelInput="纬度(Latitude)：";
            }else{
                this.projectionOutput.lngLabelInput="X：";
                this.projectionOutput.latLabelInput="Y：";
            }
        },
        getPrjList(crsObj){
            this.prjListInput.length=0
            for (const name in crsObj) {
                this.prjListInput.push({name:"EPSG:"+crsObj[name]+" "+name,epsg:crsObj[name]});
            }
            this.projectionInput.crs=this.prjListInput[0].epsg;
        },
        getPrjList2(crsObj){
            this.prjListOutput.length=0
            for (const name in crsObj) {
                this.prjListOutput.push({name:"EPSG:"+crsObj[name]+" "+name,epsg:crsObj[name]});
            }
            this.projectionOutput.crs=this.prjListOutput[0].epsg;
        },
        getCrsType(name){
            for (let i = 0; i < crsTypeList.length; i++) {
                if(crsTypeList[i].name===name){
                    return crsTypeList[i].type;
                }
            }
            return null;
        },
        projdo(){
            debugger
            let inputCrs,outputCrs, inputX,inputY;
            if(this.swaptogo){
                inputCrs=this.projectionInput.crs;
                outputCrs=this.projectionOutput.crs;
                inputX=this.projectionInput.lng;
                inputY=this.projectionInput.lat;
            }else{
                inputCrs=this.projectionOutput.crs;
                outputCrs=this.projectionInput.crs;
                inputX=this.projectionOutput.x;
                inputY=this.projectionOutput.y;
            }

            if(inputCrs==null){
                this.$message.warning("请选择输入坐标系！")
                return;
            }
            if(outputCrs==null){
                this.$message.warning("请选择输出坐标系！")
                return;
            }
            if(inputX==null){
                this.$message.warning("请输入坐标！")
                return;
            }
            if(inputY==null){
                this.$message.warning("请输入坐标！")
                return;
            }
            let result={lng:null,lat:null};
            try {
                let lng=Number(inputX);
                let lat=Number(inputY);
                let result=proj4("EPSG:"+inputCrs,"EPSG:"+outputCrs,[lng,lat])
                result= {lng:result[0],lat:result[1]};
                if(this.swaptogo){
                    this.projectionOutput.x=result.lng;
                    this.projectionOutput.y=result.lat;
                }else{
                    this.projectionInput.lng=result.lng;
                    this.projectionInput.lat=result.lat;
                }
            }catch (e) {
                this.$message.error(e)
            }
        },
        /**
         * 全屏显示
         */
        fullScreenClick(){
            if(!this.fullScreenClickTogo){
                this.selectFullScreenColor='rgb(255,0,0)'
                this.fullScreenClickTogo=true;
            }
            this.map.centerAndZoom(this.initCenter, this.initZoom);
            setTimeout(() => {
                this.selectFullScreenColor='#fff';
                this.fullScreenClickTogo=false;
            }, 1000);
        },

        /**
         * 点选查询点击事件
         */
        pointSelectClick(){
            if(!this.pointSelectBarTogo){
                this.selectPointSelectColor='rgb(255,0,0)'
                /*this.map.setDefaultCursor(
                    "url(![](../../assets/images/pointer.png)) 8 8, default"
                );*/
                this.map.addEventListener("click", this.mapClick)
            }else{
                this.selectPointSelectColor='#fff'
                //this.map.setDefaultCursor();
                this.map.removeEventListener("click", this.mapClick);
                this.map.clearOverlays();
            }
            this.pointSelectBarTogo=!this.pointSelectBarTogo;
        },

        /**
         * 地图单击事件监听
         * @param e
         */
        mapClick(e){
            this.map.clearOverlays();
            this.addMarker(new BMapGL.Point(e.latlng.lng,e.latlng.lat));
            //坐标转换
            this.bdPoint={lng:e.latlng.lng,lat:e.latlng.lat};
            console.log("百度坐标：",this.bdPoint);
            this.marsPoint= mapTools.baiduTomars(this.bdPoint);
            console.log("火星坐标：",this.marsPoint);
            this.wgs84Point=mapTools.transformGCJ2WGS(this.marsPoint);
            console.log("WGS84坐标：",this.wgs84Point);
            this.cgcsPoint=this.WGS84ToCGCS2000(this.wgs84Point.lng,this.wgs84Point.lat);
            console.log("2000坐标：",this.cgcsPoint);
            this.prjPoint=this.CGCS2000Prj(this.cgcsPoint.lng,this.cgcsPoint.lat);
            console.log("投影坐标：",this.prjPoint);
            this.infoWindowShow=true;
        },


        /**
         * 添加地图标注
         * @param point
         */
        addMarker(point) {
            if (this.map) {
                this.map.clearOverlays();
                this.map.addOverlay(new BMapGL.Marker(point));
            }
        },

        handleClose(){
            this.infoWindowShow=false;
        },
        handleClose2(){
            this.transformWindowShow=false;
        },
        handleClose3(){
            this.prjWindowShow=false;
        },
        /**
         * WGS84坐标转CGCS2000
         * @param lng
         * @param lat
         * @returns {{lng: *, lat: *}}
         * @constructor
         */
        WGS84ToCGCS2000(lng,lat){
            let result=proj4("EPSG:4326","EPSG:4490",[lng,lat])
            this.cgcsLng=result[0];
            this.cgcsLat=result[1];
            return {lng:result[0],lat:result[1]};
        },

        /**
         * CGCS2000坐标转WGS84
         * @param lng
         * @param lat
         * @returns {{lng: *, lat: *}}
         * @constructor
         */
        CGCS2000ToWGS84(lng,lat){
            let result=proj4("EPSG:4490","EPSG:4326",[lng,lat])
            this.cgcsLng=result[0];
            this.cgcsLat=result[1];
            return {lng:result[0],lat:result[1]};
        },

        /**
         * CGCS2000投影
         * @param lng
         * @param lat
         * @returns {{lng: *, lat: *}}
         * @constructor
         */
        CGCS2000Prj(lng,lat){
            let result=proj4("EPSG:4490","EPSG:"+this.epsgCode,[lng,lat])
            if(result && result.length===2){
                this.cgcsLng=result[0];
                this.cgcsLat=result[1];
            }
            return {lng:result[0],lat:result[1]};
        },

        /**
         * 投影坐标转CGCS2000地理坐标
         * @param x
         * @param y
         * @returns {{lng: *, lat: *}}
         * @constructor
         */
        Prj2CGCS2000(x,y){
            let result=proj4("EPSG:"+this.epsgCode,"EPSG:4490",[x,y]);
            return {lng:result[0],lat:result[1]};
        },

    },
    created(){
      this.$nextTick(()=>{
        if (this.screenWidth < 768) {
            // 宽度小于768
            this.toolbarTop="93%"
            this.toolbarRight="2%"
            this.toolbarWidth="85%"
            this.toolbarIconLeft="-2rem"
            this.toolbarIconHeight="2.8rem"
            this.toolbarIconTop="-0.65rem"
            this.toolbarIconImg="2.8rem"


        } else {
            // 其余尺寸
            this.toolbarTop="2.1rem"
            this.toolbarRight="2%"
            this.toolbarWidth="22rem"
            this.toolbarIconLeft="-10%"
            this.toolbarIconHeight="195%"
            this.toolbarIconTop="-3%"
            this.toolbarIconImg="130%"

        }
      });
    },
    watch: {
        screenWidth(val) { // 监听屏幕大小
            this.screenWidth = val;
            if (this.screenWidth < 768) {
                // 宽度小于768
                this.toolbarTop="93%"
                this.toolbarRight="2%"
                this.toolbarWidth="85%"
                this.toolbarIconLeft="-2rem"
                this.toolbarIconHeight="2.8rem"
                this.toolbarIconTop="-0.65rem"
                this.toolbarIconImg="2.8rem"

            } else {
                // 其余尺寸
                this.toolbarTop="2.1rem"
                this.toolbarRight="2%"
                this.toolbarWidth="22rem"
                this.toolbarIconLeft="-10%"
                this.toolbarIconHeight="195%"
                this.toolbarIconTop="-3%"
                this.toolbarIconImg="130%"

            }
        },
    },
};

</script>

<style scoped>
a:hover {  color : blue  }
.toolbar{
    width:90%;
    background:#002e6f;
    color: #fff;
    border-radius:8px 8px 8px 8px;
    padding: .6rem;
    position:absolute;
    right: 2%;
    top: 2rem;
    z-index: 100;
    height: 1.5rem;
    border: 1px solid #50d1fd;
}

.toolbar-title {
    margin: 0 0.2rem;
}
a {
    /* margin-right: 1rem; */
    text-decoration: none;
    cursor: pointer;
}

.popup-address > div {
    float: left;
}

.order-data >p {
    float: left;
    margin: 2% 0 2% 5px;
    width: 72%;
}
.order-data p:first-child {
    width: 5rem;
}

</style>